<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>JS 在线统计图表制作工具, 曲线图, 折线图, 柱状图, 饼图, 直方图, JS 图表, 免费的 JS 统计图表生成器</title>
	<meta name="keywords" content="在线图表制作工具,曲线图,折线图,柱状图,饼图,直方图,JS图表,JS统计图表">
	<meta name="description" content="这是一个免费的在线生成各种数据图表的工具, 可像 Excel 一样编辑">
	<script src="js/jquery.min.js"></script>
	<script src="js/highcharts.js"></script>
	<script src="js/jquery.handsontable.full.js"></script>
	<link rel="stylesheet" media="screen" href="css/jquery.handsontable.full.css">
	<link rel="stylesheet" media="screen" href="css/style.css">
</head>
<body>

<h1 style="text-align: center;">
	JS 在线统计图表制作工具
	<span style="font-size:14px;"><a href="en/">English Version</a></span>
</h1>

<p>这是一个免费的在线生成各种统计图表的工具, 可像 Excel 一样编辑, 然后生成曲线图, 折线图, 柱状图, 饼图, 直方图等多种丰富的图表!</p>

<h3>表格录入:</h3>
<div id="data" class="handsontable"><div style="position: relative; " class="wtHolder"><div style="position: relative; " class="wtHider"><div class="wtSpreader"><table class="htCore"><colgroup><col class=" rowHeader"><col style=""><col style=""><col style=""><col style=""><col style=""><col style=""><col style=""><col style=""></colgroup><thead><tr><th></th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th><th>H</th></tr></thead><tbody><tr><th>1</th><td class="">X轴</td><td class="">系列1</td><td class="">系列2</td><td class="">系列3</td><td class=""></td><td class=""></td><td class=""></td><td class=""></td></tr><tr><th>2</th><td class="">a</td><td class="">12</td><td class="">8</td><td class="">1</td><td class=""></td><td class=""></td><td class=""></td><td class=""></td></tr><tr><th>3</th><td class="">b</td><td class=""></td><td class="">3</td><td class="">3</td><td class=""></td><td class=""></td><td class=""></td><td class=""></td></tr><tr><th>4</th><td class="">c</td><td class="">23</td><td class="">3</td><td class="">9</td><td class=" current"></td><td class=""></td><td class=""></td><td class=""></td></tr><tr><th>5</th><td class="">d</td><td class="">23</td><td class="">3</td><td class="">9</td><td class=""></td><td class=""></td><td class=""></td><td class=""></td></tr><tr><th>6</th><td class=""></td><td class=""></td><td class=""></td><td class=""></td><td class=""></td><td class=""></td><td class=""></td><td class=""></td></tr><tr><th>7</th><td class=""></td><td class=""></td><td class=""></td><td class=""></td><td class=""></td><td class=""></td><td class=""></td><td class=""></td></tr></tbody></table></div><div style="position: absolute; top: 0px; left: 0px; "><div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 50px; display: block; top: 96px; left: 249px; "></div><div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 23px; width: 2px; display: block; top: 96px; left: 249px; "></div><div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 50px; display: block; top: 118px; left: 249px; "></div><div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 24px; width: 2px; display: block; top: 96px; left: 298px; "></div><div class="wtBorder current corner" style="background-color: rgb(82, 146, 247); height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: block; top: 115px; left: 295px; "></div></div><div style="position: absolute; top: 0px; left: 0px; "><div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 200px; display: none; top: 27px; left: 49px; "></div><div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 115px; width: 1px; display: none; top: 27px; left: 49px; "></div><div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 200px; display: none; top: 142px; left: 49px; "></div><div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 116px; width: 1px; display: none; top: 27px; left: 249px; "></div><div class="wtBorder area corner" style="background-color: rgb(137, 175, 249); height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; top: 138px; left: 245px; "></div></div><div style="position: absolute; top: 0px; left: 0px; "><div class="wtBorder fill" style="background-color: red; height: 1px; width: 50px; display: none; top: 50px; left: 149px; "></div><div class="wtBorder fill" style="background-color: red; height: 92px; width: 1px; display: none; top: 50px; left: 149px; "></div><div class="wtBorder fill" style="background-color: red; height: 1px; width: 50px; display: none; top: 142px; left: 149px; "></div><div class="wtBorder fill" style="background-color: red; height: 93px; width: 1px; display: none; top: 50px; left: 199px; "></div><div class="wtBorder fill corner" style="background-color: red; height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; "></div></div></div></div><div class="handsontableInputHolder htHidden" style="top: 0px; left: 0px; overflow: hidden; "><textarea class="handsontableInput" style="height: 0px; width: 0px; resize: none; overflow-y: hidden; "></textarea></div></div>

<p>注: 支持从 Excel 表直接复制粘贴表格. 填入数据后, 表格会自动扩展.</p>

<fieldset id="form" style="margin: 20px 0; padding: 0;">
	<legend>生成图表</legend>
	<table>
		<tbody><tr>
			<td>类型:</td>
			<td>
				<select name="type">
					<option value="spline">曲线图</option>
					<option value="line">折线图</option>
					<option value="column">柱状图(竖柱)</option>
					<option value="bar" selected="selected">条形图(横条)</option>
					<option value="pie">饼图</option>
					<option value="area">面积图</option>
					<option value="scatter">XY 散点图</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>标题:</td>
			<td>
				<input type="text" name="title" value="标题" style="width: 200px;">
			</td>
		</tr>
		<tr>
			<td>Y轴:</td>
			<td>
				<input type="text" name="ytitle" value="Y轴" style="width: 200px;">
			</td>
		</tr>
		<tr>
			<td></td>
			<td><button>生成图表</button></td>
		</tr>
	</tbody></table>
</fieldset>


<div id="charts" style="width: 99%; margin: 0; padding: 0;" data-highcharts-chart="3"><div class="highcharts-container" id="highcharts-13" style="position: relative; overflow: hidden; width: 1097px; height: 400px; text-align: left; line-height: normal; z-index: 0; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px; cursor: auto; "><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1097" height="400"><defs><clipPath id="highcharts-14"><rect rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="400" stroke-width="0.000001"></rect></clipPath><clipPath id="highcharts-15"><rect fill="none" x="0" y="0" width="1028" height="271"></rect></clipPath></defs><rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="1097" height="400" stroke-width="0.000001"></rect><g class="highcharts-grid" zIndex="1"></g><g class="highcharts-grid" zIndex="1"><path fill="none" d="M 59 266.5 L 1087 266.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path><path fill="none" d="M 59 221.5 L 1087 221.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path><path fill="none" d="M 59 176.5 L 1087 176.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path><path fill="none" d="M 59 130.5 L 1087 130.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path><path fill="none" d="M 59 85.5 L 1087 85.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path><path fill="none" d="M 59 40.5 L 1087 40.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path><path fill="none" d="M 59 311.5 L 1087 311.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path></g><g class="highcharts-axis" zIndex="2"><path fill="none" d="M 572.5 311 L 572.5 316" stroke="#C0D0E0" stroke-width="1"></path><path fill="none" d="M 829.5 311 L 829.5 316" stroke="#C0D0E0" stroke-width="1"></path><path fill="none" d="M 1086.5 311 L 1086.5 316" stroke="#C0D0E0" stroke-width="1"></path><path fill="none" d="M 315.5 311 L 315.5 316" stroke="#C0D0E0" stroke-width="1"></path><text x="573" y="343" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#666;font-weight:bold;font-size:120%;fill:#666;" zIndex="7" text-anchor="middle" visibility="visible"><tspan x="573">X轴</tspan></text><path fill="none" d="M 59 311.5 L 1087 311.5" stroke="#C0D0E0" stroke-width="1" zIndex="7" visibility="visible"></path></g><g class="highcharts-axis" zIndex="2"><text x="27" y="175.5" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#666;font-weight:bold;font-size:120%;fill:#666;" zIndex="7" transform="rotate(270 27 175)" text-anchor="middle" visibility="visible"><tspan x="27">8</tspan></text></g><g class="highcharts-series-group" zIndex="3"><g class="highcharts-series" visibility="visible" zIndex="0.1" transform="translate(59,40)" clip-path="url(#highcharts-15)"><path fill="none" d="M 128.5 117.4 C 128.5 117.4 436.9 18.1 642.5 18.1 C 745.3 18.1 899.5 18.1 899.5 18.1" stroke="black" stroke-width="5" zIndex="1" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path><path fill="none" d="M 128.5 117.4 C 128.5 117.4 436.9 18.1 642.5 18.1 C 745.3 18.1 899.5 18.1 899.5 18.1" stroke="black" stroke-width="3" zIndex="1" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path><path fill="none" d="M 128.5 117.4 C 128.5 117.4 436.9 18.1 642.5 18.1 C 745.3 18.1 899.5 18.1 899.5 18.1" stroke="black" stroke-width="1" zIndex="1" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path><path fill="none" d="M 128.5 117.4 C 128.5 117.4 436.9 18.1 642.5 18.1 C 745.3 18.1 899.5 18.1 899.5 18.1" stroke="#4572A7" stroke-width="2" zIndex="1"></path></g><g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(59,40)" clip-path="none"><path fill="#4572A7" d="M 899.5 14.100000000000001 C 904.828 14.100000000000001 904.828 22.1 899.5 22.1 C 894.172 22.1 894.172 14.100000000000001 899.5 14.100000000000001 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path><path fill="#4572A7" d="M 642.5 14.100000000000001 C 647.828 14.100000000000001 647.828 22.1 642.5 22.1 C 637.172 22.1 637.172 14.100000000000001 642.5 14.100000000000001 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path><path fill="#4572A7" d="M 128.5 113.4 C 133.828 113.4 133.828 121.4 128.5 121.4 C 123.172 121.4 123.172 113.4 128.5 113.4 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path></g><g class="highcharts-series" visibility="visible" zIndex="0.1" transform="translate(59,40)" clip-path="url(#highcharts-15)"><path fill="none" d="M 128.5 153.6 C 128.5 153.6 282.7 198.7 385.5 198.7 C 488.3 198.7 539.7 198.7 642.5 198.7 C 745.3 198.7 899.5 198.7 899.5 198.7" stroke="black" stroke-width="5" zIndex="1" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path><path fill="none" d="M 128.5 153.6 C 128.5 153.6 282.7 198.7 385.5 198.7 C 488.3 198.7 539.7 198.7 642.5 198.7 C 745.3 198.7 899.5 198.7 899.5 198.7" stroke="black" stroke-width="3" zIndex="1" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path><path fill="none" d="M 128.5 153.6 C 128.5 153.6 282.7 198.7 385.5 198.7 C 488.3 198.7 539.7 198.7 642.5 198.7 C 745.3 198.7 899.5 198.7 899.5 198.7" stroke="black" stroke-width="1" zIndex="1" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path><path fill="none" d="M 128.5 153.6 C 128.5 153.6 282.7 198.7 385.5 198.7 C 488.3 198.7 539.7 198.7 642.5 198.7 C 745.3 198.7 899.5 198.7 899.5 198.7" stroke="#AA4643" stroke-width="2" zIndex="1"></path></g><g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(59,40)" clip-path="none"><path fill="#AA4643" d="M 899.5 194.7 L 903.5 198.7 899.5 202.7 895.5 198.7 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path><path fill="#AA4643" d="M 642.5 194.7 L 646.5 198.7 642.5 202.7 638.5 198.7 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path><path fill="#AA4643" d="M 385.5 194.7 L 389.5 198.7 385.5 202.7 381.5 198.7 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path><path fill="#AA4643" d="M 128.5 149.6 L 132.5 153.6 128.5 157.6 124.5 153.6 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path></g><g class="highcharts-series" visibility="visible" zIndex="0.1" transform="translate(59,40)" clip-path="url(#highcharts-15)"><path fill="none" d="M 128.5 216.8 C 128.5 216.8 282.7 213.16 385.5 198.7 C 488.3 184.24 539.7 144.5 642.5 144.5 C 745.3 144.5 899.5 144.5 899.5 144.5" stroke="black" stroke-width="5" zIndex="1" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path><path fill="none" d="M 128.5 216.8 C 128.5 216.8 282.7 213.16 385.5 198.7 C 488.3 184.24 539.7 144.5 642.5 144.5 C 745.3 144.5 899.5 144.5 899.5 144.5" stroke="black" stroke-width="3" zIndex="1" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path><path fill="none" d="M 128.5 216.8 C 128.5 216.8 282.7 213.16 385.5 198.7 C 488.3 184.24 539.7 144.5 642.5 144.5 C 745.3 144.5 899.5 144.5 899.5 144.5" stroke="black" stroke-width="1" zIndex="1" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path><path fill="none" d="M 128.5 216.8 C 128.5 216.8 282.7 213.16 385.5 198.7 C 488.3 184.24 539.7 144.5 642.5 144.5 C 745.3 144.5 899.5 144.5 899.5 144.5" stroke="#89A54E" stroke-width="2" zIndex="1"></path></g><g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(59,40)" clip-path="none"><path fill="#89A54E" d="M 895.5 140.5 L 903.5 140.5 903.5 148.5 895.5 148.5 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path><path fill="#89A54E" d="M 638.5 140.5 L 646.5 140.5 646.5 148.5 638.5 148.5 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path><path fill="#89A54E" d="M 381.5 194.7 L 389.5 194.7 389.5 202.7 381.5 202.7 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path><path fill="#89A54E" d="M 124.5 212.8 L 132.5 212.8 132.5 220.8 124.5 220.8 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path></g></g><text x="549" y="25" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:16px;color:#3E576F;fill:#3E576F;" text-anchor="middle" class="highcharts-title" zIndex="4"><tspan x="549">标题</tspan></text><g class="highcharts-data-labels" visibility="visible" zIndex="6" transform="translate(59,40)"><g zIndex="1" style="" transform="translate(119,96)" visibility="inherit"><text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1"><tspan x="3">12</tspan></text></g><g zIndex="1" style="" transform="translate(633,-3)" visibility="inherit"><text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1"><tspan x="3">23</tspan></text></g><g zIndex="1" style="" transform="translate(890,-3)" visibility="inherit"><text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1"><tspan x="3">23</tspan></text></g></g><g class="highcharts-data-labels" visibility="visible" zIndex="6" transform="translate(59,40)"><g zIndex="1" style="" transform="translate(122,133)" visibility="inherit"><text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1"><tspan x="3">8</tspan></text></g><g zIndex="1" style="" transform="translate(379,178)" visibility="inherit"><text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1"><tspan x="3">3</tspan></text></g><g zIndex="1" style="" transform="translate(636,178)" visibility="inherit"><text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1"><tspan x="3">3</tspan></text></g><g zIndex="1" style="" transform="translate(893,178)" visibility="inherit"><text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1"><tspan x="3">3</tspan></text></g></g><g class="highcharts-data-labels" visibility="visible" zIndex="6" transform="translate(59,40)"><g zIndex="1" style="" transform="translate(122,196)" visibility="inherit"><text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1"><tspan x="3">1</tspan></text></g><g zIndex="1" style="" transform="translate(379,178)" visibility="inherit"><text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1"><tspan x="3">3</tspan></text></g><g zIndex="1" style="" transform="translate(636,124)" visibility="inherit"><text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1"><tspan x="3">9</tspan></text></g><g zIndex="1" style="" transform="translate(893,124)" visibility="inherit"><text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1"><tspan x="3">9</tspan></text></g></g><g class="highcharts-legend" zIndex="7" transform="translate(453,358)"><rect rx="5" ry="5" fill="none" x="0.5" y="0.5" width="190" height="26" stroke-width="1" stroke="#909090" visibility="visible"></rect><g zIndex="1" clip-path="url(#highcharts-14)"><g><g class="highcharts-legend-item" zIndex="1" transform="translate(8,3)"><path fill="none" d="M 0 11 L 16 11" stroke-width="2" stroke="#4572A7"></path><path fill="#4572A7" d="M 8 7 C 13.328 7 13.328 15 8 15 C 2.6719999999999997 15 2.6719999999999997 7 8 7 Z" stroke="#FFFFFF" stroke-width="0.000001"></path><text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" text-anchor="start" zIndex="2"><tspan x="21">系列1</tspan></text></g><g class="highcharts-legend-item" zIndex="1" transform="translate(69,3)"><path fill="none" d="M 0 11 L 16 11" stroke-width="2" stroke="#AA4643"></path><path fill="#AA4643" d="M 8 7 L 12 11 8 15 4 11 Z" stroke="#FFFFFF" stroke-width="0.000001"></path><text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" text-anchor="start" zIndex="2"><tspan x="21">系列2</tspan></text></g><g class="highcharts-legend-item" zIndex="1" transform="translate(130,3)"><path fill="none" d="M 0 11 L 16 11" stroke-width="2" stroke="#89A54E"></path><path fill="#89A54E" d="M 4 7 L 12 7 12 15 4 15 Z" stroke="#FFFFFF" stroke-width="0.000001"></path><text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" text-anchor="start" zIndex="2"><tspan x="21">系列3</tspan></text></g></g></g></g><g class="highcharts-axis-labels" zIndex="7"><text x="187.5" y="325" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:237px;color:#666;line-height:14px;fill:#666;" text-anchor="middle"><tspan x="187.5">a</tspan></text><text x="444.5" y="325" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:237px;color:#666;line-height:14px;fill:#666;" text-anchor="middle"><tspan x="444.5">b</tspan></text><text x="701.5" y="325" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:237px;color:#666;line-height:14px;fill:#666;" text-anchor="middle"><tspan x="701.5">c</tspan></text><text x="958.5" y="325" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:237px;color:#666;line-height:14px;fill:#666;" text-anchor="middle"><tspan x="958.5">d</tspan></text></g><g class="highcharts-axis-labels" zIndex="7"><text x="51" y="315.6" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end"><tspan x="51">-5</tspan></text><text x="51" y="270.43333333333334" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end"><tspan x="51">0</tspan></text><text x="51" y="225.26666666666668" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end"><tspan x="51">5</tspan></text><text x="51" y="180.1" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end"><tspan x="51">10</tspan></text><text x="51" y="134.93333333333334" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end"><tspan x="51">15</tspan></text><text x="51" y="89.76666666666665" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end"><tspan x="51">20</tspan></text><text x="51" y="44.6" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end"><tspan x="51">25</tspan></text></g><g class="highcharts-tooltip" zIndex="8" style="padding:0;white-space:nowrap;" visibility="hidden" transform="translate(111,146.00726318359375)"><rect rx="5" ry="5" fill="none" x="0" y="0" width="66" height="26" stroke-width="5" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></rect><rect rx="5" ry="5" fill="none" x="0" y="0" width="66" height="26" stroke-width="3" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></rect><rect rx="5" ry="5" fill="none" x="0" y="0" width="66" height="26" stroke-width="1" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.15" transform="translate(1, 1)"></rect><rect rx="5" ry="5" fill="rgb(255,255,255)" x="0" y="0" width="66" height="26" stroke-width="2" fill-opacity="0.85" stroke="#4572A7" anchorX="77.88035025943091" anchorY="11.00726318359375"></rect><text x="5" y="18" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;" zIndex="1"><tspan x="5">系列1: 12</tspan></text></g><text x="1087" y="395" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:10px;cursor:pointer;color:#909090;fill:#909090;" text-anchor="end" zIndex="8"><tspan x="1087">Highcharts.com</tspan></text><g class="highcharts-tracker" zIndex="9"><g visibility="visible" zIndex="1" transform="translate(59,40)" clip-path="url(#highcharts-15)"><path fill="none" d="M 118.5 117.4 L 128.5 117.4 C 128.5 117.4 436.9 18.1 642.5 18.1 C 745.3 18.1 899.5 18.1 899.5 18.1 L 909.5 18.1" isTracker="true" stroke-linejoin="round" visibility="visible" stroke-opacity="0.0001" stroke="rgb(192,192,192)" stroke-width="22" style=""></path></g><g visibility="visible" zIndex="1" transform="translate(59,40)" clip-path="url(#highcharts-15)"><path fill="none" d="M 118.5 153.6 L 128.5 153.6 C 128.5 153.6 282.7 198.7 385.5 198.7 C 488.3 198.7 539.7 198.7 642.5 198.7 C 745.3 198.7 899.5 198.7 899.5 198.7 L 909.5 198.7" isTracker="true" stroke-linejoin="round" visibility="visible" stroke-opacity="0.0001" stroke="rgb(192,192,192)" stroke-width="22" style=""></path></g><g visibility="visible" zIndex="1" transform="translate(59,40)" clip-path="url(#highcharts-15)"><path fill="none" d="M 118.5 216.8 L 128.5 216.8 C 128.5 216.8 282.7 213.16 385.5 198.7 C 488.3 184.24 539.7 144.5 642.5 144.5 C 745.3 144.5 899.5 144.5 899.5 144.5 L 909.5 144.5" isTracker="true" stroke-linejoin="round" visibility="visible" stroke-opacity="0.0001" stroke="rgb(192,192,192)" stroke-width="22" style=""></path></g></g></svg></div></div>


<script type="text/javascript">
<!--
var data = [
	["X轴", "系列1", "系列2", "系列3"],
	["a", 12, 3, 1],
	["b", '', 21, 3],
	["c", 23, 31, 9],
	["d", 23, 31, 9]
];


$(function(){
	$(document).ready(function() {
		var table = $('#data').handsontable({
			minRows: 7,
			minCols: 8,
			minSpareRows: 1,
			minSpareCols: 1,
			rowHeaders: true,
			colHeaders: true,
			data: data
		}).data('handsontable');

		$('button').click(function(){
			var datagrid = table.getData();
			var type = $('select[name=type]').val();
			var title = $('input[name=title]').val();
			var ytitle = $('input[name=ytitle]').val();
			show_chart(type, title, ytitle, datagrid);
			return false;
		}).click();
	});
});

function show_chart(type, title, ytitle, datagrid){
	var series = [];
	var xlabels = [];
	var xtitle = datagrid[0][0];

	for(i=1; i<datagrid[0].length-1; i++){
		var y = datagrid[0][i];
		if(y == '' || y == null){
			break;
		}
		series.push({
			name: y,
			data: []
		});
	}
	for(i=1; i<datagrid.length-1; i++){
		var x = datagrid[i][0];
		if(x == '' || x == null){
			break;
		}
		xlabels.push(x);
		for(j=1; j<datagrid[i].length-1; j++){
			if(datagrid[0][j].length == 0){
				continue;
			}
			var y = parseFloat(datagrid[i][j]);
			if(!isNaN(y)){
				series[j-1].data.push([x, y]);
			}else{
				series[j-1].data.push([x, null]);
			}
		}
	}
	var tmp = [];
	for(i=0; i<series.length; i++){
		if(series[i].data.length > 0){
			tmp.push(series[i]);
		//	alert(series[i].data);
		}
	}
	series = tmp;
	//alert(xlabels);
	//alert(series[0].data);

	$('#charts').html('');
	var charts = new Highcharts.Chart({
		chart: {
			renderTo: 'charts',
			type: type
		},
		title: {
			text: title
		},
		subtitle: {
			text: ''
		},
		xAxis: {
			title: {
				text: xtitle,
				style: {
					color: '#666',
					"font-size": '120%'
				}
			},
			categories: xlabels,
			min: 0, //
			//minRange: 1,
			minPadding: 1, //
			labels: {
				formatter: function() {
					return this.value + '';
				}
			}
		},
		yAxis: {
			title: {
				text: ytitle,
				style: {
					color: '#666',
					"font-size": '120%'
				}
			},
			labels: {
				formatter: function() {
					return this.value;
				}
			}
		},
		tooltip: {
			enabled: true,
			formatter: function() {
				return this.series.name + ': '+this.y +''; //
			}
		},
		plotOptions: {
			series:{
				connectNulls: true
			},
			line: {
				dataLabels: {
					enabled: true
				},
				enableMouseTracking: true
			},
			spline: {
				dataLabels: {
					enabled: true
				}
			},
			bar: {
				dataLabels: {
					enabled: true
				}
			},
			column: {
				dataLabels: {
					enabled: true
				}
			},
			area: {
				dataLabels: {
					enabled: true
				}
			},
			pie: {
				allowPointSelect: true,
				showInLegend: true,
				dataLabels: {
					enabled: true,
					formatter: function() {
						var p = this.percentage + '';
						var pos = p.indexOf('.');
						if(pos != -1){
							p = p.substr(0, pos + 2);
						}
						return '<b>'+ this.point.name +'</b>: ' + p +' %';
					}
				}
			}
		},
		series: series
	});
}

//-->
</script>


<div style="font-size: 12px; margin-top: 50px; text-align: center;">
	Copyright © 2013 <b><a href="http://www.udpwork.com/">udpwork.com</a></b>. All rights reserved.
	<script type="text/javascript">
	<!--
	document.write(unescape("| %3Cscript src='http://js.users.51.la/414722.js' type='text/javascript'%3E%3C/script%3E"));
	//-->
	</script>| <script src="http://js.users.51.la/414722.js" type="text/javascript"></script><a href="http://www.51.la/?414722" target="_blank" title="51.la 专业、免费、强健的访问统计">网站统计</a>
<img style="width:0px;height:0px" src="http://web1.51.la:82/go.asp?svid=1&amp;id=414722&amp;tpages=1&amp;ttimes=1&amp;tzone=8&amp;tcolor=32&amp;sSize=1920,1080&amp;referrer=http%3A//www.ideawu.net/blog/archives/351.html%23more-351&amp;vpage=http%3A//charts.udpwork.com/">
</div>




<arclones><textarea class="handsontableInput" style="height: 0px; width: 41px; resize: none; overflow: hidden; line-height: 16.883333206176758px; text-decoration: initial; letter-spacing: 0px; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-align: start; direction: ltr; word-spacing: 0px; padding: 0.49em; position: absolute; top: -9999px; left: -9999px; opacity: 0; border: 1px solid black; " tabindex="-1"></textarea><div style="width: auto; white-space: nowrap; float: left; line-height: 16.883333206176758px; text-decoration: initial; letter-spacing: 0px; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-align: start; direction: ltr; word-spacing: 0px; padding: 0.49em; position: absolute; top: -9999px; left: -9999px; opacity: 0; overflow: hidden; border: 1px solid black; " tabindex="-1">X轴</div><textarea class="handsontableInput" style="height: 0px; width: 168px; resize: none; overflow: hidden; line-height: 16.883333206176758px; text-decoration: initial; letter-spacing: 0px; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-align: start; direction: ltr; word-spacing: 0px; padding: 0.49em; position: absolute; top: -9999px; left: -9999px; opacity: 0; border: 1px solid black; " tabindex="-1"></textarea><div style="width: auto; white-space: nowrap; float: left; line-height: 16.883333206176758px; text-decoration: initial; letter-spacing: 0px; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-align: start; direction: ltr; word-spacing: 0px; padding: 0.49em; position: absolute; top: -9999px; left: -9999px; opacity: 0; overflow: hidden; border: 1px solid black; " tabindex="-1">系列1	系列2	系列3
12	8	1
	3	3
23	3	9
23	3	9
</div></arclones></body></html>